<template>
  <a-modal v-model="visible" :width='1200'  title="工单详情" @cancel='cancel' footer=''>
    <a-tabs  default-active-key="1" @change="callback" >
      <a-tab-pane key="1" tab="预处理工单">
        <a-table
          ref='table'
          size='middle'
          :scroll={x:1000,y:400}
          bordered
          @change='pChange'
          :columns='columns'
          :dataSource='dataSource'
          :loading='loading'
          :pagination='ipagination'
        >

        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="转办工单" force-render>
        <a-table
          ref='table'
          size='middle'
          :scroll={x:1000,y:400}
          bordered
          @change='tChange'
          :columns='transferColumns'
          :dataSource='data'
          :loading='loading'
          :pagination='tipagination'
        >

        </a-table>
      </a-tab-pane>

    </a-tabs>
<!--    &lt;!&ndash; 搜索条件 &ndash;&gt;-->
<!--    <div class="table-page-search-wrapper">-->
<!--      <a-form layout="inline">-->
<!--        <a-row :gutter="10">-->
<!--          <a-col :md="6" :sm="8">-->
<!--            <a-form-item label="筛选方式">-->
<!--              <a-select v-if='parentDate.length>0' :default-value="pcode" style="width: 120px" @change="handleChange">-->
<!--                <a-select-option v-for='item in parentDate' :key='item.code' :value='item.code'>-->
<!--                  {{ item.name }}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md="8" :sm="12">-->
<!--            <a-form-item label="关键字">-->
<!--              <a-tree-select-->
<!--                v-model="queryData.keyword"-->
<!--                :tree-data="treeData"-->
<!--                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"-->
<!--                show-search-->
<!--                :replace-fields="{children:'children', key:'key', value: 'title', title: 'title'}"-->
<!--                style="width: 100%"-->
<!--                placeholder="默认全部"-->
<!--                allow-clear-->
<!--              >-->
<!--              </a-tree-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->

<!--          <a-col :md="8" :sm="12">-->
<!--            <span class="table-page-search-submitButtons" >-->
<!--              <a-button type="primary" icon="search" @click='loadData'>查询</a-button>-->
<!--              <a-button type="primary" style="margin-left: 8px"  icon="reload" @click='reload'>重置</a-button>-->
<!--            </span>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form>-->
<!--    </div>-->


  </a-modal>
</template>

<script>
import { getAction } from '@api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ReportsHandleMonthlyService from '@/myService/ReportsHandleMonthlyService'
import { createLogger } from 'vuex'
export default {
  name: 'OrderDetailModal',
  mixins:[JeecgListMixin],
  data(){
    return{
      visible:false,
      dataSource:[],
      data:[],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      tipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      queryData:{
        keyword:undefined,
        pageIndex:1,
        pageSize: 10
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) =>
            <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '来源',
          dataIndex: 'sjly',
          align: 'center',
          ellipsis: true
        },
        {
          title: '信访件编号',
          dataIndex: 'xfjbh',
          align: 'center',
          ellipsis: true
        },
        {
          title: '内容分类',
          align: 'center',
          dataIndex: 'nrfl',
          scopedSlots: { customRender: 'purpose' },
          ellipsis: true
        },
        {
          title: '信访目的',
          align: 'center',
          dataIndex: 'xfmd',
          ellipsis: true
        },
        {
          title: '问题属地',
          align: 'center',
          dataIndex: 'wtsd',
          scopedSlots: { customRender: 'dealType' },
          ellipsis: true
        },
        {
          title: '反映内容',
          align: 'center',
          width: 300,
          dataIndex: 'fynr',
          ellipsis: true
        },
        {
          title: '登记时间',
          align: 'center',
          dataIndex: 'djsj',
          ellipsis: true
        }

      ],
      transferColumns:[
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) =>
            <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '信访件编号',
          dataIndex: 'xfjbh',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '姓名',
          dataIndex: 'xm',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '信访形式',
          dataIndex: 'xfxs',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '问题属地',
          dataIndex: 'wtsd',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '问题属地代码',
          dataIndex: 'wtsddm',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '办理方式',
          dataIndex: 'blfs',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '去向单位',
          dataIndex: 'qxdw',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '去向单位代码',
          dataIndex: 'qxdwdm',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '概况',
          dataIndex: 'gk',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '登记单位',
          dataIndex: 'djdw',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '登记时间',
          dataIndex: 'djsj',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '办结时间',
          dataIndex: 'bjsj',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '责任单位评价情况',
          dataIndex: 'zrdwpjzt',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '信访部门满意度',
          dataIndex: 'xfbmmyd',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '责任单位满意度',
          dataIndex: 'zrdwmyd',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '初重件标志',
          dataIndex: 'scxfbz',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '手机号码',
          dataIndex: 'sjhm',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '扬言标志',
          dataIndex: 'yybz',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '内容分类代码',
          dataIndex: 'nrfldm',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '内容分类',
          dataIndex: 'nrfl',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '答复意见内容',
          dataIndex: 'clqk',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '回访标志',
          dataIndex: 'hfbz',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '信访目的',
          dataIndex: 'xfmd',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: '信访件关联ID',
          dataIndex: 'relateddocstoreid',
          align: 'center',
          width: 120,
          ellipsis: true
        },

      ],
      /* table加载状态 */
      loading: false,
      month:'',
      parentDate:[],
      pcode:'',
      treeData:[],
      url: {
        list: "/sys/category/rootList",
        loadTreeRoot:'/sys/category/loadTreeRoot'
      },
    }
  },
  methods:{
    async open(month) {
      this.month = month;
      await this.getParent();
      this.getTree()
      this.visible = true;
      await this.getAllPretreatmentOrder(this.month,this.ipagination.current,this.ipagination.pageSize)
    },
    cancel(){
      this.visible=false;
      this.ipagination.current=1,
      this.ipagination.pageSize=10,
        this.tipagination.current=1,
        this.tipagination.pageSize=10,
        this.data=[],
        this.dataSource=[]
    },
    loadData(){

    },
    reload(){

    },

    getDataByResult(result){
      if(result && result.length>0){
        result.forEach((item)=>{
          let node={
            id:item.id,
            pId:item.pid,
            value:item.name,
            title:item.name,
            isLeaf: item.hasChild < 1
          }
          this.treeData.push(node);
        })
      }
    },
    async getParent() {
      let params = this.getQueryParams()
      await getAction(this.url.list, params).then(res => {
        if (res.success) {
          let result = res.result
          if (Number(result.total) > 0) {
            this.parentDate = result.records
            this.pcode = this.parentDate[0].code
          } else {
            this.parentDate = []
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleChange(code){
      this.pcode=code;
      this.getTree()
    },
    getTree(){
      let params = {
        pcode: this.pcode,
        async: false
      }
      this.treeData=[]
      getAction(this.url.loadTreeRoot, params).then((res) => {
        if (res.success) {
          if (res.result && res.result.length > 0) {

            this.treeData= res.result
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    async getAllPretreatmentOrder(month,pageIndex,pageSize){
      try {
        this.loading=true
        let params={
          periodId:month,
          pageIndex: pageIndex,
          pageSize:pageSize
        }
         let res = await ReportsHandleMonthlyService.getPretreatmentOrder(params)

        if (res.code===200){
          this.dataSource=res.result.records,
          this.ipagination.current=res.result.current,
          this.ipagination.pageSize=res.result.size,
          this.ipagination.total=res.result.total

        }
        this.loading=false
      }catch (e){
        this.loading=false
        this.$message.warning(e)
      }
    },
    pChange(e){

      this.getAllPretreatmentOrder(this.month,e.current,e.pageSize)
    },
    tChange(e){

      this.getAllTransferOrder(this.month,e.current,e.pageSize)
    },
    async getAllTransferOrder(periodId,pageIndex,pageSize){
      try {
        this.loading=true
        let res = await ReportsHandleMonthlyService.getAllTransferOrder({
          periodId:periodId,
          pageIndex:pageIndex,
          pageSize:pageSize
        })
        if (res.code===200){
          this.data=res.result.records,
            this.tipagination.current=res.result.current,
            this.tipagination.pageSize=res.result.size,
            this.tipagination.total=res.result.total

        }
        this.loading=false
      }catch (e) {
        this.loading=false
        this.$message.warning(e)
      }
    },
    callback(e){
      if (e==1){
        this.getPretreatmentOrder(this.month,this.ipagination.current,this.ipagination.pageSize)
      }else {
        this.getAllTransferOrder(this.month,this.tipagination.current,this.tipagination.pageSize)
      }
    }

  }
}
</script>

<style scoped>

</style>